<template>
  <page-view class="food-detail-page">
    <page-header title="菜品详情" :show-back="true"></page-header>
    <div class="content-box" v-if="foodDetail">
      <skeleton title avatar :row="5" :loading="loading">
        <!-- 商品展示 -->
        <div class="food-img-box">
          <!-- 从vue中拿到全局变量BaseURL与拿到的该商品的网络图片地址合并 -->
          <img
            v-lazy="BaseURL + foodDetail.food_img"
            @click.stop="showThisImage"
          />
        </div>
        <!-- 详情展示 -->
        <ul class="food-desc">
          <!-- foodDetail都是setup下面返回出来的对象 -->
          <li><span>菜品名称:</span>{{ foodDetail.food_name }}</li>
          <li><span>菜品价格:</span>{{ foodDetail.price }}</li>
          <li><span>菜品重量:</span>{{ foodDetail.weight }}克</li>
          <li class="food-intro">{{ foodDetail.food_desc }}</li>
        </ul>

        <!-- 留言展示 -->
        <div class="comment-list">
          <h3 class="text-primary">最新评论</h3>
          <pull-refresh v-model="refreshing" @refresh="onRefresh">
            <list
              v-model:loading="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              color="#0094ff"
            >
              <!-- 评论组件 -->
              <comment-item
                v-for="item in commentList"
                :key="item.id"
                :c_item="item"
              ></comment-item>
            </list>
          </pull-refresh>
        </div>
        <!-- 件 -->
        <action-bar>
          <action-bar-icon icon="chat-o" text="客服" dot />
          <!-- badge购物车上面的数量（活的） -->
          <action-bar-icon
            icon="cart-o"
            text="购物车"
            :badge="shopCarBarData.totalCount || 0"
            @click="$router.push('shopCart')"
          />
          <action-bar-button
            type="warning"
            text="加入购物车"
            @click="addToShopCar"
            :loading="ShopCarButtonLoading"
          />
          <action-bar-button
            type="danger"
            text="立即购买"
            @click="toShopCarList"
          />
        </action-bar>
      </skeleton>
    </div>
  </page-view>
</template>

<script>
// 总体组件引入进来
import PageView from "@/components/PageView.vue";
//将头部组件引入进来
import PageHeader from "@/components/PageHeader.vue";
// 导入用到的组件模块（ref，reactive动态获取页面元素,onMounted生命周期,toRefs结构对象的,getCurrentInstance创建vue的实例化对象{{proxy}}）
import { ref, onMounted, reactive, toRefs, getCurrentInstance } from "vue";
//导入用到的vant的组件（ImagePreview图片预览，Skeleton用于在内容加载过程中展示一组占位图形
//List瀑布流滚动加载，用于展示长列表，当列表即将滚动到底部时，会触发事件并加载更多列表项。,PullRefresh下拉刷新（有监听函数可以调用））
import {
  ImagePreview,
  Skeleton,
  List,
  PullRefresh,
  ActionBar,
  ActionBarIcon,
  ActionBarButton,
  Toast,
} from "vant";
//导入API(调用里面的请求方法)
import Api from "@/utils/api";
//导入useRoute（为了创建route实例化对象,解析url的值）
import { useRoute, useRouter } from "vue-router";
//导入评论组件模块
import CommentItem from "../components/CommentItem.vue";
// 导入仓库
import { useStore } from "vuex";
import router from "@/router";
export default {
  name: "FoodDetail",
  components: {
    PageView,
    PageHeader,
    Skeleton,
    ImagePreview,
    List,
    PullRefresh,
    CommentItem,
    ActionBar,
    ActionBarIcon,
    ActionBarButton,
  },
  setup() {
    //拿到路由的实例化对象
    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    const { proxy } = getCurrentInstance();
    // onMounted(() => {
    //   loading.value = false;
    // });

    // 点击图片预览
    function showThisImage() {
      ImagePreview([proxy.BaseURL + info.foodDetail.food_img]);
    }

    // 根据id查询到的商品详细信息
    let info = reactive({
      foodDetail: {},
      loading: false,
      //评论数组
      commentList: [],
      // 分页的总页码
      pageCount: 0,
      // 结束页码
      pageEnd: 0,
      // 当前页码
      pageIndex: 1,
      // 开始页码
      pageStart: 1,

      //请求商品的总条数
      totalCount: 0,
      // 是否开启懒加载
      finished: false,
      refreshing: false,
    });

    //获取菜品的详细信息
    const getFoodDetailById = async (id) => {
      //开启加载框去触发onLoad函数
      info.loading = true;
      //拿到请求回来的那个对象
      info.foodDetail = await Api.foodInfo.findById(id);
      //关闭加载框去触发onLoad函数
      info.loading = false;
    };

    //什么时候调用该方法（onMounted,onActivated在不缓存的情况下都执行,缓存的情况下onActivated都会执行）
    //不能缓存该组件，要不然每次点击进来都是同一个商品详情页面
    onMounted(() => {
      //拿到商品fid
      let id = route.query.fid;
      //在页面加载的时候就去请求该id对应的各部分信息（调用方法）
      getFoodDetailById(id);
      getCommentList(id);
      getMyShopCartTotalInfo();
    });

    //处理留言信息

    const getCommentList = async (fid, pageIndex = 1) => {
      // 触发Loda函数
      info.loading = true;

      // 将请求回来的留言数组赋值给results（包含各类信息）
      let results = await Api.commentInfo.getCommentInfoListByFid({
        fid,
        pageIndex,
      });

      // 页码数变化（懒加载用到的那个）
      info.pageCount = results.pageCount;
      info.pageEnd = results.pageEnd;
      info.pageIndex = results.pageIndex;
      info.pageStart = results.pageStart;
      info.totalCount = results.totalCount;

      //将拿到的返回的每一条评论都push到上面的commentList里面（做后面的页面加载使用）
      info.commentList.push(...results.listData);
      //有请求就为false
      info.loading = false;
      //判断是否在最后一页（当前页码与分页的总页码做比较，去判断是否开启加载框）
      // finished	是否已加载完成，加载完成后不再触发 load 事件
      info.finished = info.pageIndex >= info.pageCount;
      //refreshing 是否已加载完成，加载完成后不再触发 load 事件
      info.refreshing = false;
    };

    //丅滚懒加载菜单
    const onRefresh = () => {
      // 关闭当前加载的load事件
      info.finished = false;
      info.refreshing = true;
      //清长度地址不改变
      info.commentList.length = 0;
      //重新获取数据
      getCommentList(route.query.fid);
    };

    //下拉刷新菜单
    const onLoad = () => {
      if (info.pageIndex < info.pageCount) {
        // 如果当前页码小于请求回来的最大页码,将当前页码加1并再次发起请求
        getCommentList(Number(info.pageIndex) + 1);
      }
    };

    // 购物功能实现
    const shopCarBarData = reactive({
      // 购物车数量
      totalCount: 0,
      // 购物车价格
      totalPrice: 0,
    });

    // 获取购物车的总数量
    const getMyShopCartTotalInfo = async () => {
      //判断是否登陆了
      let userInfo = store.state.userInfo;
      if (userInfo) {
        //拉取该用户的购物车信息
        let results = await Api.shopCart.getMyShopCartTotalInfo();
        // 购物车商品总数量
        shopCarBarData.totalCount = results.totalCount;
        //购物车商品总价格
        shopCarBarData.totalPrice = results.totalPrice;
      }
    };

    // 定义在添加商品的时候，购物车的动画关闭
    let ShopCarButtonLoading = ref(false);
    // 添加商品
    const addToShopCar = () => {
      let userInfo = store.state.userInfo;
      if (userInfo) {
        // 页面的加载动画开启
        ShopCarButtonLoading.value = true;
        //商品添加到购物车
        setTimeout(async () => {
          let res = await Api.shopCart.addToShopCart({
            // 商品的fid
            fid: route.query.fid,
            // 数量
            count: 1,
          });
          // 页面的加载动画关闭
          ShopCarButtonLoading.value = false;
          // 轻提示
          Toast.success("加入购物车成功");
          // 重新拉取数据（购物车的总数量）
          getMyShopCartTotalInfo();
        }, 1000);
      } else {
        proxy.$toast("赶紧登陆去");

        router.push({ name: "Login" });
      }
    };

    // 立即购买
    const toShopCarList = () => {
      let userInfo = store.state.userInfo;
      if (userInfo) {
        // 写入购物车操作
        router.push({ name: "ShopCart" });
      } else {
        proxy.$toast("赶紧登陆去");
        router.push({ name: "Login" });
      }
    };

    // 将info解析丢出去，便于页面上值的获取（同名结构）
    // 抛出的东西
    return {
      ...toRefs(info),
      showThisImage,
      onRefresh,
      onLoad,
      toShopCarList,
      ShopCarButtonLoading,
      addToShopCar,
      getMyShopCartTotalInfo,
      shopCarBarData,
    };
  },
};
</script>

<style lang="scss" scoped>
.food-detail-page {
  @include flexbox(column);
  .content-box {
    flex: 1;
    overflow: auto;
    padding-bottom: 50px;
    .food-img-box {
      height: 250px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .food-desc {
      box-sizing: border-box;
      padding: 5px;
      font-size: 14px;
      border-bottom: 1px solid lightcyan;
      li {
        line-height: 1.8;
        span {
          font-weight: bold;
        }
        &.food-intro {
          text-indent: 2em;
        }
      }
    }
  }
}
</style>
